<template>
	<view>
		<TUICallKit></TUICallKit>
		<view class="loginBox">
			<view class="box">
				<u-avatar size="200rpx" :src="detail.avatar"></u-avatar>
				<view class="headInfo">{{detail.name}}</view>
			</view>
			<view class="login">
				<button class="loginBtn" v-if="isLogin">
					等待医生连接中。。。
				</button>
				<button class="loginBtn" v-else>
					加载中。。。
				</button>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { doctorDetail} from '@/services/api/index/index';
	import {
		useAuthStore
	} from '@/store/modules/auth';
	import {
		ref
	} from "vue";
	import * as GenerateTestUserSig from "../debug/GenerateTestUserSig-es.js";
	import {
		TUICallKitServer
	} from "../src/index";
	import TUICallKit from "../src/Components/TUICallKit";
	let userID = ref("");
	let isLogin = ref(false);
	const id=ref('');
	const detail = ref('');
	const authStore = useAuthStore();
	onLoad((options) => {
		id.value = options.id;
		userID.value=`1_${authStore.getUserId}`
		getDetail();
		loginHandler()
	});
	
	async function getDetail() {
		const { data } = await doctorDetail({ id: id.value });
		detail.value = data;
	}
	const loginHandler = async () => {
		if (!userID.value) return;
		const {
			userSig,
			SDKAppID
		} = GenerateTestUserSig.genTestUserSig({
			userID: userID.value,
		});
		await TUICallKitServer.init({
			sdkAppID: SDKAppID,
			userID: userID.value,
			userSig: userSig,
		});
		isLogin.value = true;
		userID.value = "";
	};

	const callHandler = async () => {
		await TUICallKitServer.call({
			userID: userID.value,
			type: 2,
		});
	};
</script>
<style lang="scss">
	.box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.headInfo{
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 30rpx;
		}
	}

	.loginBox {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 100vh;
	}

	input {
		display: flex;
		font-size: 20px;
	}

	.login {
		bottom: 5vh;
		margin: 70rpx;
	}

	.login button {
		width: 80%;
		background-color: #FABB3C;
		font-size: 32rpx;
		border-radius: 50px;
		color: white;
	}
</style>